<template>
  <div>
    <el-space wrap>
      <el-card class="box-card" shadow="hover">
        <el-row justify="space-around">
          <el-space>
            <el-avatar :src="picture" :size="188" shape="square" />
            <el-descriptions :column="1">
              <el-descriptions-item label="姓名">
                {{ userInfo.name }}
              </el-descriptions-item>
              <el-descriptions-item label="年龄">
                {{ userInfo.age }}
              </el-descriptions-item>
              <el-descriptions-item label="班级">
                {{ userInfo.banji }}
              </el-descriptions-item>
              <el-descriptions-item label="手机">
                {{ userInfo.phone }}
              </el-descriptions-item>
              <el-descriptions-item label="邮箱">
                {{ userInfo.email }}
              </el-descriptions-item>
            </el-descriptions>
          </el-space>
        </el-row>
      </el-card>

      <el-card style="width: 790px; height: 235px" shadow="hover">
        <el-table-v2
          :columns="columns"
          :data="assistList"
          :width="750"
          :height="196"
          fixed
        />
      </el-card>
      <PieChart />
    </el-space>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import PieChart from '@/components/chart/PieChart.vue'
import { getPicture, getInfo } from '@/api/modules/student'
import { getAssist } from '@/api/modules/assist'
import { useSpeechSynthesis } from '@vueuse/core'

// ------------------------------ 语音 ------------------------------
const noticeText = ''
const {
  isSupported,
  isPlaying,
  status,
  utterance,
  error,
  stop,
  toggle,
  speak,
} = useSpeechSynthesis(noticeText, {
  lang: 'zh-HK',
  pitch: 1,
  rate: 0.5,
  volume: 1,
})

// ------------------------------ 展示信息 ------------------------------
// 援助列表
const assistList = ref([])
// 列 column 的配置数组
const columns = [
  {
    key: 'phone',
    dataKey: 'phone',
    title: '手机号',
    width: 200,
    fixed: true,
  },
  {
    key: 'email',
    dataKey: 'email',
    title: '邮箱',
    width: 200,
    fixed: true,
  },
  {
    key: 'description',
    dataKey: 'description',
    title: '需求描述',
    width: 350,
    fixed: true,
  },
]
// 用户信息
const userInfo = ref({
  name: '',
  age: '',
  banji: '',
  phone: '',
  email: '',
})
// 照片
const picture = ref()

// ------------------------------ 挂载 ------------------------------
// 初始化
onMounted(() => {
  ElNotification({
    title: 'Success',
    message: '欢迎使用校园疫情防控管理系统',
    type: 'success',
    duration: 2000,
    offset: 50,
  })
  getPicture()
    .then((response) => {
      picture.value = window.URL.createObjectURL(new Blob([response]))
    })
    .catch((error) => {
      console.log(error)
    })
  getInfo().then((response) => {
    userInfo.value = response.data
  })
  getAssist().then((response) => {
    assistList.value = response.data
  })
  speak()
})
</script>

<style lang="scss">
.box-card {
  /* width: 300px; */
}

.el-avatar {
  --el-avatar-bg-color: var(--el-color-white);
}
</style>
